﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Member_Master.Master" AutoEventWireup="true" CodeBehind="M_ProductInformation1.aspx.cs" Inherits="WebApplication.M_ProductInformation1" %>
<%@ Register TagPrefix="uc1" TagName="usermeg" Src="~/UserControl/M_UserMessageControl.ascx" %>
<%@ Register TagPrefix="uc1" TagName="maintab" Src="~/UserControl/M_MainTabControl.ascx" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Media/Css/master2.css" rel="stylesheet" media="all"/>
<link href="Media/Css/PeterCss.css" rel="Stylesheet" media="all" />
<script type="text/javascript" src="Media/JS/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" media="all" href="Media/Css/jquery.lightbox-0.5.css">
<script type="text/javascript">
    $(document).ready(function () {
        $("#ImgList .p2 a").lightBox();
        $("#ImgList .showbig").each(function () {
            var self = $(this);
            self.click(function () {
                self.parents("li").find(".p2 img").click();
            });
        });
    });

    //数组， 
    var sub1 = [{ id: 0, name: "Textile & Garment", sub2: [{ id: 1, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 1, name: "Beads & Synthetic Stone" }
                                                                                                             ]
    },
                                                               { id: 1, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 1, name: "Beads & Synthetic Stone" }
                                                                                                             ]
                                                               }
                                                              ]
    },
        { id: 2, name: "Electronics, AV & IT", sub2: [{ id: 1, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
        },
                                                   { id: 2, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
                                                   },
                                                   { id: 3, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
                                                   }]
        },

        { id: 3, name: "Gifts & Premium", sub2: [{ id: 3, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
        }]
        },
        { id: 4, name: "Houseware", sub2: [{ id: 3, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup"}] }
                                          ]
        }

        ]//end


    //这个是第一个国家选项
    function show_sub2(id) {
        var val = "";
        var str2 = "";
        var sub2 = [];
        sub2 = sub1[id].sub2;
        len = sub2.length;

        //设置被选
        $("#sub1_cn li").removeClass("cselected");
        $("#li_1_" + id).addClass("cselected");

        val = sub1[id].name;
        $("#categorytxt").val(val);
        if (len > 0) {
            for (i = 0; i < len; i++) {
                str2 = str2 + '<li class=\"categorylist\" id=\"li_2_' + i + '\" onclick=\"show_sub3(\'' + id + "\',\'" + i + '\')\" >' + sub2[i].name + '</li>';

            }
            $("#category_sub2").show();
            $("#category_sub3").hide();
            $("#sub2_cn").children().remove();
            $("#sub2_cn").html(str2);

        } else {
            $("#category_sub2").hide();
        }

    }
    function show_sub3(id2, id3) {
        var str3 = "";
        var sub3 = [];


        $("#sub2_cn li").removeClass("cselected");
        $("#li_2_" + id3).addClass("cselected");
        val = sub1[id2].name + " ; " + sub1[id2].sub2[id3].name;
        $("#categorytxt").val(val);

        sub3 = sub1[id2].sub2[id3].sub3;
        len = sub3.length;
        var str3 = "";
        if (len > 0) {
            for (i = 0; i < len; i++) {
                str3 = str3 + '<li class=\"categorylist\" id=\"li_3_' + i + '\" onclick=\"insertInput(\'' + id2 + '\',\'' + id3 + '\',\'' + i + '\')\" >' + sub3[i].name + '</li>';

            }
            $("#sub3_cn").children().remove();
            $("#sub3_cn").html(str3);
            $("#category_sub3").show();
        } else {
            $("#category_sub3").hide();
        }

    }
    function insertInput(id1, id2, id3) {

        $("#sub3_cn li").removeClass("cselected");
        $("#li_3_" + id3).addClass("cselected");
        val = sub1[id1].name + " ; " + sub1[id1].sub2[id2].name + " ; " + sub1[id1].sub2[id2].sub3[id3].name;
        $("#categorytxt").val(val);
    }

    function show_category() {

        $("#category_wrap").show();
        var str1 = "";
        for (i = 0; i < sub1.length; i++) {
            str1 = str1 + '<li class=\"categorylist\" id=\"li_1_' + i + '\" onclick=\"show_sub2(\'' + i + '\')\" >' + sub1[i].name + '</li>';
        }

        $("#sub1_cn").children().remove();
        $("#sub1_cn").html(str1);


        //      //  这里是鼠标点击其他地方的时候关闭弹出框	
        //        document.onclick = function (e)   //要兼容FF的话，这个参数一定要写上   
        //        {
        //            e = window.event || e;
        //            var srcElement = e.srcElement || e.target;
        //            if (srcElement.id != "category_wrap1" && srcElement.id != "category_sub1" && srcElement.id != "category_sub2" && srcElement.id != "category_sub3" && srcElement.id != "address_details1" && srcElement.id != "country_text1" && srcElement.className != "linka") {
        //                $("#category_wrap1").hide();
        //            }
        //        }

    }
  
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="content-title">
        <h1>
            Membership Info</h1>
    </div>
    <input type="hidden" value="t23" id="pageName" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<uc1:usermeg ID="usermeg" runat="server" ></uc1:usermeg>  
<div class="partWrap">
<uc1:maintab ID="maintab"  runat="server"/>	
     <div class="clear20"></div>
     
	 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="basiform">
	  <tr>
	   <td>
	     <!--<span style="font-size:15px;"> -->閣下可以上傳産品圖片共10張，其中一張免费贈送，另外九張為購買的廣告服務，有效期從2010年6月1日至2011年5月31日。<!--</span> -->
	   </td>
	  </tr>
	  <tr>
	   <td>
	   <!-- <span style="font-size:15px;"> -->如有疑問，請致電：（852）2730 9851 或電郵：membership@exporters.org.hk 舆本會業務發展部聨络。<!--</span> -->
	   </td>
	  </tr>
	 </table>
	 
	 <!--<div class="clear10"></div> -->
	 
	 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="basiform">
	  <tbody>
	    <tr>
		 <td>
		  <ul class="ImgList" id="ImgList">
		   <li>
		   <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		   <li>
		   <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		   <p class="p1">Filename.jpg</p>
           <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div></p>
		   </li>
		  </ul>
		 </td>
		</tr>
	  </tbody> 
	 </table>
	 <ul class="uibtn">
   	<li onClick="javascript:ToggleDocument('ImgInfo')"><span>Add Product Information</span></li>
	</ul>
	
	<div id="ImgInfo" class="ImgInfo">

	<h4 class="title20">Product Image Information</h4>

  <table width="" border="0">  
  <tr>
    <td>Duration of advertising</td>
    <td> : </td>
    <td>01 Jun 2010 to 31 May 2011</td>

  </tr>
  </table>
    <div class="category_con" id="category_con">

    <div class="address_wrap" id="category_wrap">
		<div class="address_btn" id="address_btn" onClick="CloseDocument('category_wrap')">
					<div class="address_btn_wrap">
				     	<img src="Media/css/images/goodsdelete.gif" alt="" border="0" /></div>		
		</div>

		<div class="category_box1" id="category_sub1">
			<ul id="sub1_cn">
            </ul>
		</div>
		<div class="category_box2" id="category_sub2">
				<ul id="sub2_cn">
            </ul>
		</div>
		<div class="category_box3" id="category_sub3">

			<ul id="sub3_cn">
            </ul>
		</div>
		</div><!-- address_wrap end-->
    </div>
    <!--category_con end-->
	<table border="0" cellpadding="0" cellspacing="0" width="100%" class="basiform">
	<tbody>	
	<tr>

	  <td><p class="upinput">Sequence No.</p>
	 <input type="text" class="input200" >
	  </td>
	  <td>
      <p class="upinput" >Product Category</p>
	 
	   <input type="text" onClick="show_category()" id="categorytxt" class="input400" >

	  </td>

	  <td><p class="upinput">Model No.</p>
	  <input type="text" value="No." class="input200" />
	  </td>
	</tr>
	
	<tr>
	  <td><p class="upinput">Product Name </p>
	  <input type="text" class="input200" >
	  </td>

	  <td><p class="upinput">Product Size </p>
	  <input type="text" class="input200" >
	  </td>
	  <td><p class="upinput">MOQ</p>
	  <input type="text" class="input200" >
	  </td>
	</tr>
	<tr>

	<td colspan="3">
	<p class="upinput">Product Specifications&nbsp;<em>(1,000.00 character limited)</em> </p>
	<textarea class="textarea800" >
	</textarea>
	</td>
	</tr>
	
	<tr>
	  <td><p class="upinput">產品名稱</p>
	  <input type="text" class="input200" >
	  </td>

	  <td><p class="upinput">產品規格</p>
	  <input type="text" class="input200" >
	  </td>

	  <td><p class="upinput">最低訂貨量</p>
	  <input type="text" class="input200" >
	  </td>
	</tr>
	
	<tr>
	  <td colspan="3"><p class="upinput">產品說明&nbsp;<em>(限制1,000.00個字符)</em></p>
	 <textarea class="textarea800" >
	</textarea>
	  </td>	
	</tr>	
</tbody>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="basiform">
	<tbody>	
	<tr>
	<td colspan="3">
	<p>&nbsp;</p>
	<table width="520">
	<tr>
	 <td>Product Image</td>
	 <td valign="top"><div class="addWrap">
	  <ul class="uibtn">
    	<li onClick="javascript:ToggleDocument('smallImgList2')"><span>Add</span></li>
	  </ul>	 
	<div class="smallImgList" id="smallImgList2">	
	<table width="100%">
	<tr>
	<td  align="right"> <img class="delete closeBtn" src="Media/Css/images/del-form.png" onClick="CloseDocument('smallImgList2')"></td>
	</tr>
	<tr>
	 <td><h5>Choose from Media Room</h5></td>
	</tr>

	<tr>
	<td>	
	 <div class="imgQu">
	 <ul class="slist">
		  <li><img src="Media/Css/images/010.png" ></li>
	 <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>

	  <li><img src="Media/Css/images/010.png" ></li>
	 <li><img src="Media/Css/images/010.png" ></li>
	 </ul>
	 </div>
	</td>
	</tr>
	<tr>
	<td height="35"><a href="#">Upload image from your computer </a></td>

	</tr>
     

	<tr>

	<td height="35">
    <table  border="0" cellspacing="0" cellpadding="0" class="btnwrap">
			  <tr>
				<td  class="btnwrapl">
				 <ul class="uibtn">
    	              <li><span>Save</span></li>
	             </ul>
				</td>
                <td >
                </td>				
			  </tr>
			</table>	 </td>

	</tr>
	</table>
	 </div><!-- smallImgList end -->
	 </div><!-- addWrap end -->
	 </td>
	</tr>
    <tr>
      <td valign="top" width="300">
         <ul class="ImgActionList">
           <li>
		     <span>Your computer upload path</span>
			 <span><img src="Media/Css/images/del-form.png"></span>
		   </li>
         </ul>
      </td>
    </tr>

	</table>	
	</td>	
	</tr>	
	
	<tr>
		<td colspan="3">
		<ul class="ImgList">
		    <li>

		
		<p class="p2"><img src="Media/Css/images/155_151.jpg" /></p>
        <p class="p1">Filename.jpg</p>
		
        <div class="p4">
          <span class="showbig">View</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span>
        </div>
		</li>

		
		</ul>
		</td>
	</tr>
	
	</tbody>
	</table>
	<div class="clear10"></div>
	
   <table width="250">
	<tr>
	<td width="60">

	 <ul class="uibtn">
    	<li><span>Save</span></li>
	  </ul>	 
	</td>
	<td>
	 <ul class="uibtn">
    	<li><span>Quit</span></li>
	  </ul>	
	</td>

	</tr>
	</table>

	</div><!--ImgInfo end-->
	<div class="clear10"></div>
	 </div><!-- partWrap end-->
</asp:Content>
